<template>
  <div class="m-iselect">
    <el-form :inline="true"
              class="demo-form-inline">

      <el-form-item label="按省份选择:">
        <el-select v-model="province"
                    placeholder="省份">
          <el-option v-for="item in provinces"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
          </el-option>
        </el-select>
        <el-select v-model="city"
                    :disabled='province ? false:true'
                    placeholder="城市">
          <el-option v-for="item in cities"
                      :key="item.value"
                      :label="item.label"
                      :value="item">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label='直接搜索：'>
        <el-autocomplete v-model="state"
                          :fetch-suggestions="querySearchAsync"
                          placeholder="请输入内容"
                          @select="handleSelect"></el-autocomplete>
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script lang='ts' src='./iselect.ts'> </script>

<style lang='scss'>
@import "@/assets/css/changecity/iselect.scss";
.m-iselect {
  .el-form-item {
    margin-bottom: 0;
  }
  .el-form-item__label {
    font-size: 16px;
  }
}
</style>